<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>set和Map数据结构</title>
  <style>
    body {
      padding: 20px;
    }
    div, p, li {
      line-height: 40px;
    }
    span {
      color: red;
    }
  </style>
</head>
<body>
  <h2>Set数据结构</h2>
  <ul>
    <li>
      ES6提供了新的数据结构-Set。它类似于数组，但成员的值都是唯一的，没有重复。set结构不会添加重复的值
    </li>
    <li>Set函数可以接受一个数组（或者具有iterable接口的其他数据结构）作为参数，用来初始化</li>
    <li>
      在Set中加入值时不会发生类型转换，所以，5和'5'是两个不同的值。Set内部判断两个值是否相同的算法类似于===，主要区别是NaN等于自身，而精确相等运算符认为NaN不等于自身
    </li>
  </ul>

  <h3>Set的实例属性和方法</h3>
  <ul>
    <li>
      Set结构的实例有以下属性。
      <div>Set.prototype.constructor:构造函数，默认就是Set函数</div>
      <div>Set.prototype.size:返回Set实例的成员总数</div>
    </li>
    <li>
      实例的方法分为操作方法和遍历方法
    </li>
    <li>
      <h4>操作方法</h4>
      <ul>
        <li>add(val):添加某个值，返回Set结构本身</li>
        <li>delete(value):删除某个值，返回一个布尔值，表示删除是否成功</li>
        <li>has(value):返回一个布尔值，表示参数是否为Set的成员</li>
        <li>clear():清除所有成员，没有返回值</li>
      </ul>
    </li>
    <li>
      <h4>遍历操作：Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用</h4>
      <ul>
        <li>
          keys():返回键名的遍历器
        </li>
        <li>
          values():返回键值的遍历器
          <div>
            <span>
              由于Set结构没有键名，只有键值（或者说键名和键值时同1个值，所以keys方法和values方法的行为完全一致），所以keys方法和values方法的行为完全一致
            </span>
          </div>
        </li>
        <li>
          entries():返回键值对的遍历器
        </li>
        <li>
          forEach():使用回调函数遍历每个成员
        </li>
        <li>
          <span> 
            Set结构的实例默认可遍历，其默认遍历器生成函数就是它的values方法
          </span>
        </li>
        <li>
          Set结构实例的forEach方法用于对每个成员执行某种操作，没有返回值
        </li>
        <li>
          <span>
            如果想在遍历操作中同时改变原来的Set结构，目前没有直接的方法，但有两种变通的方法。一种是利用原Set结构映射出一个新的结构，然后赋值给原来的Set结构；<span>另一种是利用Array.from方法</span>
          </span>
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>